<!--
 * @Description: 
 * @Author: charles
 * @Date: 2021-05-05 22:02:56
 * @LastEditors: 杨雨翰
 * @LastEditTime: 2022-01-06 19:40:29
-->
<template>
  <!--1. 容器 -->
  <div id="right1Container" style="height: 95%"></div>
</template>
<script>
// 导入图表
import { Liquid } from "@antv/g2plot";
import { mapState } from "vuex";
export default {
  data() {
    return {
      liquidPlot: "",
    };
  },

  watch: {
    info(newv) {
      let humidity = Number(newv.humidity);
      this.liquidPlot.changeData(humidity / 100);
    },
  },

  methods: {
    initChart() {
      // 1.准备数据
      //console.log(info);
      // 2.初始化图表实例，配置配置项
      this.liquidPlot = new Liquid("right1Container", {
        percent: Number(this.info.humidity) / 100,
        outline: {
          border: 0,
          distance: 0,
          style: {
            // stroke: "#02234e",
            // strokeOpacity: "100%",
          },
        },
        wave: {
          length: 128,
        },
      });
      //执行页面渲染
      this.liquidPlot.render();
    },

    // vue实例完全挂载到页面上
  },
  mounted() {
    this.initChart();
  },
  computed: {
    //map
    info() {
      return this.$store.state.info;
    },
  },
};
</script>